<template>
  <div class="show-login-box">
    <c-login-related>
      <div class="login-left-box">
        <div class="login-left">
          <p class="login-title">{{showLogin?'登录小说精品屋':'注册小说精品屋小说账号'}}</p>
          <div class="register-code" v-show="!showLogin">
            <input v-model="registerCode" type="text" class="login-input login-v-code" placeholder="请输入注册码">
            <div class="register-go" @click="showRegisterCode()">获取</div>
          </div>
          <input v-model="loginName" type="text" class="login-input login-name" :placeholder="showLogin?'邮箱':'请输入您的邮箱'">
          <input v-model="password" type="password" class="login-input login-passwd" :placeholder="showLogin?'密码':'请输入密码：6-20位字母/数字'">
          <p class="login-auto" v-show="showLogin">
            <input id="loginauto" type="checkbox" class="login-auto-box" v-model="autoLogin">
            <label for="loginauto" class="login-auto-hint">下次自动登录</label>
          </p>
          <div class="login-verify" v-show="!showLogin">
            <input v-model="emailCode" type="text" class="login-input login-v-code" placeholder="请输入验证码">
            <span class="login-v-sendbox" @click="goSendEmail()">{{sendAction}}<span v-if="remainingTime > 0">({{remainingTime}})</span></span>
          </div>
          <p class="login-btn">
            <span class="login-btn-style" v-avoid-repeat @click="loginOrRegister()">{{showLogin?'登录':'注册'}}</span>
          </p>
        </div>
      </div>
      <div class="login-right">
        <p class="loginr-hint">{{showLogin?'还没有注册账号？':'已有账号？'}}</p>
        <p class="loginr-btn">
          <!-- router-link传进slot后，scoped会不识别 -->
          <!-- <router-link :to="showLogin?'/index/register':'/index/login'"> -->
          <a :href="showLogin?'#/index/register':'#/index/login'">
            <span class="loginr-btn-style">{{showLogin?'立即注册':'立即登录'}}</span>
          </a>
          <!-- </router-link> -->
        </p>
      </div>
    </c-login-related>

    <el-dialog title="发送邮件" :visible.sync="dialogFormVisible" width="320px">
      <div class="confirm-body">
          <span>验证码</span>
          <input v-model="verCode" class="login-input"/>
          <img @click="regreshVerify()" :src="verifyCodeUrl" alt="" class="login-v-show">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-avoid-repeat @click="sendEmail()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cLoginRelated from './Login_related.vue'

export default {
  components:{
    cLoginRelated
  },
  data(){
    return {
      autoLogin:false,
      showLogin:true,
      verifyCodeUrl:this.global.apipre+'/file/getVerify?'+Math.random(),
      loginName:'',
      password:'',
      orginUrl:this.$route.query.orginUrl,
      verCode:'',
      emailCode:'',
      registerCode:'',
      dialogFormVisible:false,
      remainingTime:0,
      sendAction:'获取',
      sendTimer:0
    }
  },
  created() {
    if(this.$route.path.indexOf('register') >= 0){
      this.showLogin = false;
      // this.regreshVerify();
    }
  },
  methods:{
    regreshVerify(){
      this.verifyCodeUrl = this.global.baseURL + this.global.apipre + '/file/getVerify?'+Math.random();
    },
    goSendEmail(){
      if(this.remainingTime > 0){
        return;
      }
      if(!this.loginName){
        this.$message("请输入正确格式的登录名");
        return;
      }
      if(!this.password){
        this.$message("请输入正确格式的密码");
        return;
      }
      if(!this.registerCode){
        this.$message("请输入正确格式的注册码");
        return;
      }
      this.regreshVerify();
      this.dialogFormVisible = true;
      this.verCode = '';
    },
    sendEmail(){
      if(!this.verCode){
        this.$message("请输入图片验证码");
        return;
      }
      this.$http.postFormLoading('/user/emailSend',{username:this.loginName, password:this.password, code:this.registerCode, velCode:this.verCode}, res=>{
        // console.log(res);
        if(!res.send){
          this.$message("请于"+res.remainingTime+"秒后重新发送");
        }
        this.dialogFormVisible = false;
        this.sendAction = '已发送';
        this.remainingTime = parseInt(res.remainingTime);
        // console.log(this.remainingTime);
        //发送完成后隐藏，开始倒计时对应时间
        this.sendTimer = setInterval(this.changeRemainingTime, 1000);
      });
    },
    changeRemainingTime(){
      // console.log(this.remainingTime);
      this.remainingTime = this.remainingTime - 1;
      // console.log(this.remainingTime);
      if(this.remainingTime <= 0){
        this.remainingTime = 0;
        this.sendAction = '获取';
        clearInterval(this.sendTimer);
      }
    },
    loginOrRegister(){
      // this.$cookies.set("Authorization", Math.random(), 0);
      // this.$cookies.set("username", '13564856985', 0);
      // this.$router.push('/index/home');
      if(!this.loginName){
        this.$message("请输入正确格式的登录名");
        return;
      }
      if(!this.password){
        this.$message("请输入正确格式的密码");
        return;
      }
      
      if(this.showLogin){
        //登录流程
        this.$http.postFormLoading('/user/login',{username:this.loginName, password:this.password, emailCode:this.emailCode}, res=>{
          if(this.autoLogin){
            localStorage.setItem("Authorization", res.token);
          }else{
            localStorage.removeItem("Authorization");
          }
          this.$cookies.set("nickname", res.nickName, 0);
          this.$cookies.set("Authorization", res.token, 0);
          if(this.orginUrl){
            location.href = this.orginUrl;
          }else{
            this.$router.push('/index/home');
          }
        });
      }else{
        if(!this.registerCode){
          this.$message("请输入正确格式的注册码");
          return;
        }
        if(!this.emailCode){
          this.$message("请输入邮箱验证码");
          return;
        }
        //注册流程
        this.$http.postFormLoading('/user/register',{username:this.loginName, password:this.password, code:this.registerCode, emailCode:this.emailCode}, res=>{
          this.$cookies.set("nickname", this.loginName, 0);
          this.$cookies.set("Authorization", res.token, 0);
          this.$router.push('/index/home');
        });
      }
    },
    showRegisterCode(){
      this.$router.push('/index/registerCodes');
    }
  },
  watch:{
    '$route.path': function(newVal, oldVal){
      if(newVal.indexOf('login') >= 0){
        this.showLogin = true;
      }else{
        this.showLogin = false;
        this.regreshVerify();
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.confirm-body {
  font-size: 16px;
  height: 38px;
  .login-input {
    width: 120px;
    font-size: 14px;
    height: 36px;
    border: 1px solid #ddd;
    outline: none;
    margin-left: 10px;
  }
  .login-v-show {
    width: calc(100% - 48px - 138px - 5px);
    display: inline-block;
    height: 38px;
    float: right;
    border: 1px solid #eee;
  }
}
</style>